import { Tabs } from '@aws-amplify/ui-react';
import { Example, ExampleCode } from '@/components/Example';
import { BasicShoppingCard, AdvancedShoppingCard } from '../shared';
import { TerminalCommand } from '@/components/InstallScripts.tsx';

## Tutorial

In this brief tutorial, we're going to build a basic shopping cart component using [Vite.js](https://vitejs.dev/) and Amplify UI. Then, we'll elaborate on our shopping card to play with the possibilities of using Amplify UI.

### Setup and Installation

First, execute the command below in your terminal. When prompted for the name of your project, enter `amplify-ui-demo`.  Also see [Vite Guide](https://vitejs.dev/guide/).

<Tabs.Container defaultValue="JavaScript">
  <Tabs.List>
    <Tabs.Item value="JavaScript">JavaScript</Tabs.Item>
    <Tabs.Item value="TypeScript">TypeScript</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="JavaScript">
    #### npm 7+
    <TerminalCommand command="npm create vite@latest amplify-ui-demo -- --template react && cd amplify-ui-demo"/>

    **Next, install the Amplify UI React package:**

    <TerminalCommand command="npm install @aws-amplify/ui-react aws-amplify"/>

  </Tabs.Panel>
  <Tabs.Panel value="TypeScript">
    #### npm 7+
    <TerminalCommand command="npm create vite@latest amplify-ui-demo -- --template react-ts && cd amplify-ui-demo"/>
    **Next, install the Amplify UI React package:**

    <TerminalCommand command="npm install @aws-amplify/ui-react aws-amplify"/>

  </Tabs.Panel>
</Tabs.Container>

### Basic Demo

Open up the project in your IDE and delete the contents of the `index.css` file. 

Next, replace the contents of the `App.jsx` or `App.tsx` file with the code below:

<Example>
  <ExampleCode>
  
```tsx file=./examples/BasicExampleCode.tsx

```

  </ExampleCode>
  <BasicShoppingCard />
</Example>

Now start the app by running `npm run dev` and you should see a basic shopping card component.

### Advanced Demo

If you’d like to play around with a more comprehensive demo of the Amplify UI library, create a separate file under the `pages` folder named `paintings.js`, and copy/paste this code into it:
<Example>
<ExampleCode>

```tsx file=./examples/paintings.ts

```

  </ExampleCode>
</Example>
Then, replace the contents of `App.jsx` or `App.tsx` with the code below, restart the app, and experience all the beautiful components in action!

<Example>
  <ExampleCode>

```tsx file=./examples/AdvancedExampleCode.tsx

```

  </ExampleCode>
  <AdvancedShoppingCard />
</Example>
